<template>
  <div id="changepwd">
    <h4>修改密码</h4>
    <main>
      <p> <span>原密码</span>
        <el-input placeholder="请输入原密码" v-model="input"  show-password>
        </el-input>
      </p>
      <p> <span>新密码</span>
        <el-input
          placeholder="请输入新密码"
          v-model="inputPwd"
          show-password
        ></el-input>
      </p>
      <p> <span>确认新密码</span>
        <el-input
          placeholder="请确认密码"
          v-model="inputNew"
          show-password
        ></el-input>
      </p>
      <div class="buttonADD">
        <el-button>确认</el-button>
        <el-button>重置</el-button>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      inputPwd: "",
      inputNew: "",
    };
  },
};
</script>

<style lang="less" scoped>
#changepwd {
  width: 100%;
  height: 100%;
  background-color: #fff;
  h4 {
    padding-left: 30px;
    width: 100%;
    line-height: 50px;
    border-bottom: 1px solid #999;
  }
  p{
    padding-left: 100px;
    margin: 20px 0 20px 0;
    display: flex;
    line-height: 40px;

  }
  .el-input{
    width: 300px;
    margin-left: 20px;
  }
  p:nth-child(3){
 padding-left: 68px;
  }
 
 .buttonADD{
    padding-left: 168px;
    height: 100px;
    button{
        margin-right: 30px;
    }
 }
 
}
</style>